<template>
  <div class="tag">
    <div class="tit">{{ $t("m.tag") }}</div>
    <div class="con">
      <span v-for="item in tagList" :key="item.id" @click="toTag(item.name)">
        {{ item.name }}[{{ item.children.length }}]
      </span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tagList: [],
    };
  },
  created() {
    this.getTagList();
  },
  computed: {},
  methods: {
    // 获取标签列表
    getTagList() {
      this.$api.getTagList().then((res) => {
        if (res.success) {
          this.tagList = res.data;
        }
      });
    },
    // 去标签页
    toTag(name) {
      this.$router.push("/layout/tag/" + name);
    },
  },
  components: {},
};
</script>
<style lang='scss' scoped>
@import "../assets/scss/_theme.scss";
.tag {
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
  @include background_color("background_color3");
  margin-top: 20px;
  padding: 0 20px;
  .tit {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
  }
  .con {
    display: flex;
    flex-wrap: wrap;
    span {
      border: 1px solid #ccc;
      padding: 3px 5px;
      margin: 5px 5px;
      border-radius: 3px;
    }
    span:hover {
      border-color: red;
      color: red;
    }
  }
}
</style>